import React, {PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react'
import {Text} from "@tarojs/components";
import FloatButton from "./FloatButton";
import {Add} from "@nutui/icons-react-taro";
import Taro from "@tarojs/taro";
import {deleteOrders, OrderSummary, queryOrders} from "../apis/OrderApi";
import {Button, Cell, Space, Swipe, VirtualList} from "@nutui/nutui-react-taro";
import {DATE_WITH_HOUR_MINUTE_FORMATER} from "../utils/Date";
import homeApplianceOrderPageStackStore from "../store/HomeApplianceOrderPageStackStore";
import digitalOrderPageStackStore from "../store/DigitalOrderPageStackStore";
import {Pageable} from "../utils/Page";
import {observer} from "mobx-react-lite";

export interface OrderPageablePanelProps extends PropsWithChildren {
    isAppliance: boolean
}

const OrderPageablePanel: React.FC<OrderPageablePanelProps> = (props) => {
    const store = props.isAppliance ? homeApplianceOrderPageStackStore : digitalOrderPageStackStore
    const [loading, setLoading] = useState(false)
    const queryWithoutPageable = useCallback(async (pageable: Pageable) => {
        setLoading(true)
        return queryOrders({isHomeAppliance: props.isAppliance}, pageable);
    }, [props.isAppliance])
    const query = useCallback(() => {
        queryWithoutPageable(store.pageable).then(res => {
            if (res) {
                store.appendItems(res.data)
            }
        }).finally(() => {
            setLoading(false)
        })
    }, [queryWithoutPageable, ...store.pageable.toDependencyList()]);
    useEffect(() => {
        query()
    }, [query]);
    useEffect(() => {
        store.onRemove = async (_, list) => {
            let response = await queryWithoutPageable(new Pageable(list.length, 1));
            if (response) {
                store.list = store.list.concat(response.data.content)
            }
        }
    }, [queryWithoutPageable]);
    useEffect(() => {
        return () => {
            store.clearList()
        }
    }, []);
    const containerHeight = useMemo(() => {
        let systemInfoSync = Taro.getSystemInfoSync();
        return systemInfoSync.windowHeight - 44
    }, []);
    return <>

        <VirtualList
            containerHeight={containerHeight}
            onScroll={() => {
                if (!store.last && !loading) {
                    store.next()
                }
            }}
            itemEqual={true}
            itemHeight={66}
            list={store.list}
            itemRender={(item: OrderSummary) => {
                return <Swipe
                    key={item.id}
                    rightAction={
                        <Button type="primary" shape="square" onClick={async () => {
                            Taro.showLoading({
                                title: "删除中"
                            })
                            try {
                                await deleteOrders(item.id)
                                await store.removeItemByKey(item.id)
                            } finally {
                                Taro.hideLoading()
                            }

                        }}>
                            删除
                        </Button>
                    }
                >
                    <Cell title={<Space>
                        <Text>{item.name}</Text>
                        <Text>{item.brand}</Text>
                        <Text>{item.category}</Text>
                        {item.model && <Text>{item.model}</Text>}
                    </Space>}
                          style={{margin: 0}}
                          description={item.paymentDateTime?.format(DATE_WITH_HOUR_MINUTE_FORMATER) ?? "待支付"}
                          onClick={() => {
                              Taro.navigateTo({
                                  url: (props.isAppliance ? "/pages/editHomeAppliance" : "/pages/editDigital") + `?id=${item.id}`
                              })
                          }}/>
                </Swipe>;
            }}/>
        <FloatButton icon={<Add/>} onClick={async () => {
            await Taro.navigateTo({
                url: props.isAppliance ? "/pages/addHomeAppliance" : "/pages/addDigital"
            })
        }}/>

    </>
}

export default observer(OrderPageablePanel)


